<template>
	<view class="homework">
		<u-navbar :border-bottom="false" title="发布点评" ></u-navbar>
		<view class="container">
			<view class="block">
				<u-form :model="form" label-position="top" :label-style="{color:'#1F2329',fontSize: '28rpx',lineHeight: '40rpx'}">
					<!-- <u-form-item class="form-item" label="发送班级">
						<u-input class="studentList" v-model="banji" type="select" @click="showBjPop = true" placeholder="请选择需要发送的班级" />
					</u-form-item> -->
					<u-form-item class="form-item" label="互动类型" prop="title">
						<u-input type="select" v-model="typeTitle" @click="showType = true" />
					</u-form-item>
					<u-form-item class="form-item" label="发送学员">
						<u-input class="studentList" v-model="studentValue.title" type="select" @click="showPop = true" placeholder="请选择需要发送的学员" />
						<!-- <u-input class="studentList" v-model="studentValue.title" type="select" @click="showSelect" placeholder="请选择需要发送的学员" /> -->
					</u-form-item>
					<u-form-item class="form-item" label="正文" prop="content">
						<u-input v-model="form.content" type="textarea" />
					</u-form-item>
					<u-form-item ref="formItem" class="form-item" label="上传图片或视频" prop="file">
						<my-upload :action="action" :fileList='fileList'  name="zyfile" @success="uploadSuccess" @remove="uploadRemove"></my-upload>
					</u-form-item>
				</u-form>
			</view> 
		</view>
		<u-popup mode="center" v-model="showPop" width="100%" height="100%" >
			<studentSelect :value.sync="studentValue" :show.sync="showPop"></studentSelect>
		</u-popup>
		<!-- <u-popup mode="center" v-model="showPop" width="100%" height="100%" >
			<view style="padding: 0 32rpx;box-sizing: border-box;">
				<u-navbar :border-bottom="false" title="选择学生" :is-back="false"></u-navbar>
				<u-checkbox-group wrap @change="checkboxGroupChange">
					<u-checkbox 
						icon-size="28" size="40"
						v-model="item.isCheck" 
						v-for="(item, index) in studentList" :key="index" 
						:name="item.id"
						class="acea-row row-middle"
					>
						<view class="acea-row row-middle" >
							<image style="width: 72rpx;margin-left: 16rpx;height: 72rpx;border-radius: 8rpx;" :src="baseUrl+item.headimg" mode=""></image>
							<text style="font-size: 32rpx;width: 485rpx;margin-left: 25rpx;height: 114rpx;line-height: 114rpx;border-bottom: 2rpx solid #ebedf0;">{{item.name}}</text>
						</view>
					</u-checkbox>
				</u-checkbox-group>
				<view :style="'height: calc(120rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx + 32rpx);'"></view>
				<view style="height: 120rpx;position: fixed;width: 100%;left: 0;bottom: 0rpx;z-index: 99;background-color: #FFFFFF;box-sizing: content-box;" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);'">
					<view class="pop-btn" @click="showPop = false">确定选择</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup mode="center" v-model="showBjPop" width="100%" height="100%" >
			<view class="BjPop" style="padding: 0 32rpx;box-sizing: border-box;background-color: #f7f8fa;min-height:100vh;">
				<u-navbar :border-bottom="false" title="选择班级" :is-back="false"></u-navbar>
				<view class="list acea-row row-column" :style="'padding-bottom:32rpx;'" v-if="dianmingList.length != 0">
					<view class="item acea-row row-column" :class="item.isCheck?'bjAct':''" v-for="(item,index) in dianmingList" :key="index" @click="bjCheckHandle(item.id)">
						<view class="title">{{item.banji}}</view>
						<view class="title">{{item.kecheng}}</view>
						<view class="p acea-row row-middle">
							<text>上课时间:</text>
							<text>{{item.start_date}} {{item.timefrom}} - {{item.timeto}}</text>
						</view>
					</view>
				</view>
				<u-empty v-else text="暂无班级" mode="list" margin-top="32"></u-empty>
				<view :style="'height: calc(120rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
				<view style="height: 120rpx;position: fixed;width: 100%;left: 0;bottom: 0rpx;z-index: 99;background-color: #FFFFFF;box-sizing: content-box;" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);'">
					<view class="pop-btn" @click="showBjPop = false">{{dianmingList.length != 0?'确定选择':'退出'}}</view>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="showType" mode="selector" :range="rangeType" @confirm="idx=>{form.type = rangeType[idx].value,typeTitle = rangeType[idx].title}" range-key="title"></u-picker>
		<u-picker v-model="showEndtime" @confirm="timePickerConfirm" :start-year="common.getDate().year" :end-year="parseInt(common.getDate().year) + 1" :params="timePickerParams"></u-picker>
		<view :style="'height: calc(120rpx + '+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<view class="footer" ref="footer" :style="'padding-bottom: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);box-sizing: content-box;'">
			<view class="btn" @click="submit">发布动态</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import common from '../../../api/common.js'
	import request from '../../../api/request.js'
	const action = app.globalData.uploadUrl.zuoye
	export default{
		data(){
			return{
				baseUrl:app.globalData.baseUrl,
				id:'',
				banji:'',
				common,
				action,
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				fileList:app.globalData.hudongFiles,
				formData:{
					token:'MDAwMDAwMDAwMIPKbnI'
				},
				dianmingList:[],
				uploadFile:[],
				typeTitle:'',
				form:{
					type:"",
					student_id:'',
					content:'',
					media_file:"", //图片
				},
				// studentValue:{
				// 	title:'',
				// 	studentId:[]
				// },
				studentValue:{
					data:[],
					studentId:[]
				},
				studentList:[],
				showPop:false,
				showBjPop:false,
				showType:false,
				rangeType:[{title:'课后点评',value:'1'},{title:'课堂风采',value:'2'},{title:'学员风采',value:'3'}],
				showEndtime:false,
				timePickerParams:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad(e) {
			// console.log(e)
			if(e.id){
				this.id = e.id
				this.banji = e.banji
				this.getStudentList()
			}
		},
		mounted() {
			
		},
		methods:{
			submit(){
				let file = this.uploadFile.length>0?((app.globalData.hudongImgList.length>0?(app.globalData.hudongImgList.toString() + ','):'') + this.uploadFile.toString()):app.globalData.hudongImgList.toString()
				this.form.media_file = file
				this.form.student_id = this.studentValue.studentId.toString()
				// this.form.paike_id = this.id
				console.log(this.form)
				if(this.checkData(this.form)){
					request.go((e)=>{
						//成功时删除保存在globalData中的数据
						app.globalData.hudongImgList = []
						app.globalData.hudongFiles = []
						uni.showToast({
							icon:"success",
							title:"发布成功",
							duration:800
						})
						setTimeout(()=>{
							common.go('/pages/hudong/index',2)
						},800)
					},'/Comment/dianping',this.form,'POST')
				}
			},
			getStudentList(){
				request.go((e)=>{
					let checkId = []
					for(let i of e.data){
						i.isCheck = true
						checkId.push(i.id)
					}
					this.studentList = e.data
				},'/Comment/getSelectStudent',{id:this.id},'POST')
			},
			getDianmingData(){
				console.log(common.getDate().ymd)
				let data = {
					page:1,
					limit:999,
					start_date:common.getDate().startOfMonth,
					jieshu_date:common.getDate().endOfMonth,
					is_take:1,
				}
				request.go((e)=>{
					for(let i of e.data){
						if(i.id == this.id){
							i.isCheck = true
						}else{
							i.isCheck = false
						}
					}
					this.dianmingList = e.data
				},'/Banji/takeName',data,'POST')
			},
			checkboxGroupChange(data){
				this.studentValue.title = ''
				let checkId = []
				let title = []
				for(let i of this.studentList){
					if(i.isCheck){
						checkId.push(i.id)
					}
				}
				this.form.student_id = data?data.toString():checkId.toString()
				for(let i of checkId){
					let name = this.studentList.find(e=>e.id == i).name
					title.push(name)
				}
				this.studentValue.title = title.toString()
			},
			uploadSuccess(data){
				this.uploadFile.push(data.id) 
				this.uploadFile = [...new Set(this.uploadFile)]
				console.log("uploadSuccess",this.uploadFile)
			},
			uploadRemove(idx){
				// this.uploadFile.splice(idx,1)
				if(idx >app.globalData.hudongImgList.length-1){
					let index = idx - app.globalData.hudongImgList.length
					this.uploadFile.splice(index,1)
				}else{
					app.globalData.hudongImgList.splice(idx,1)
					app.globalData.hudongFiles.splice(idx,1)
				}
				console.log("uploadRemove",app.globalData.hudongImgList,this.uploadFile,idx)
			},
			checkData(form){
				if(form.type == ''){
					this.showErrToast('请选择动态类型')
					return false;
				}else if(form.student_id == ''){
					this.showErrToast('请选择学员')
					return false;
				}else if(form.content == ''){
					this.showErrToast('请填写动态正文')
					return false;
				}else{
					return true
				}
			},
			showErrToast(title){
				uni.showToast({
					title,
					icon:"none"
				})
			},
			timePickerConfirm(e){
				let time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				this.form.deadline = time
			},
			showSelect(){
				if(this.id != ''){
					this.showPop = true
				}else{
					uni.showToast({
						icon:"none",
						title:"请选择班级"
					})
				}
			},
			bjCheckHandle(id){
				let dianmingList = this.dianmingList
				for(let i of dianmingList){
					i.isCheck = false
				}
				let f = dianmingList.find(e=>e.id == id)
				f.isCheck = true
				this.id = f.id
				this.banji = f.banji
				this.dianmingList = dianmingList
				//重新获取学员
				this.form.student_id = ''
				this.studentValue.title = ''
				this.getStudentList()
			}
		},
		watch:{
			showPop(e){
				if(e){
					setTimeout(()=>{
						this.checkboxGroupChange()
					},300)
				}
			},
			showBjPop(e){
				if(e){
					setTimeout(()=>{
						this.getDianmingData()
					},300)
				}
			}
		}
	}
</script>

<style scoped>
	.homework{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.homework .container{
		width: 696rpx;
		margin: 32rpx auto 0;
		overflow: hidden;
		padding-bottom: 144rpx;
	}
	.homework .container .block{
		padding: 0 32rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 24rpx;
	}
	.homework .container .tip{
		margin: 20rpx auto;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.homework .container .form-item .studentList >>> input{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.homework .container .form-item >>> .u-upload{
		/* margin-left: -20rpx; */
	}
	.homework .container >>> .u-form-item{
		/* padding: 0; */
		/* margin-bottom: 20rpx; */
	}
	.homework .container >>> .form-item:nth-child(1) .u-input__input{
		/* font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 44rpx; */
		/* padding: 24rpx 0; */
	}
	.homework .container >>> .u-input__input{
		/* height: 44rpx;
		box-sizing: content-box; */
	}
	.homework .footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 999;
	}
	.homework .footer .btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 24rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		z-index: 99;
		background-color: #1661FF;
	}
	.homework >>> .pop-btn{
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		/* z-index: 99; */
		background-color: #1661FF;
		margin: 24rpx auto 0;
		/* position: fixed; */
		/* bottom: 20rpx; */
		/* left: 50%; */
		/* transform: translateX(-50%); */
	}
	
	.homework .BjPop .list{
		width: 686rpx;
		margin: 0rpx auto 0;
		overflow: hidden;
	}
	.homework .BjPop .list .title-time{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.homework .BjPop .list .item{
		position: relative;
		padding: 32rpx 0 32rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		width: 100%;
		box-sizing: border-box;
		margin: 32rpx auto 0;
		border: 4rpx solid transparent;
	}
	.homework .BjPop .list .item .title{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.homework .BjPop .list .item .p{
		margin-bottom: 16rpx;
		font-size: 28rpx;
	}
	.homework .BjPop .list .item .p:last-of-type{
		margin-bottom: 0;
	}
	.homework .BjPop .list .item .p text:nth-child(1){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		width: 134rpx;
		display: block;
		margin-right: 24rpx;
	}
	.homework .BjPop .list .item .p text:nth-child(2){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.homework .BjPop .list .item .rollcall{
		position: absolute;
		right: 32rpx;
		top: 122rpx;
		background-color: #1661FF;
		border-radius: 8rpx;
		/* width: 96rpx; */
		padding: 0 20rpx;
		height: 48rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.homework .BjPop .list .item .already-rollcall{
		position: absolute;
		top: 36rpx;
		right: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.homework .BjPop .list .item.bjAct{
		box-sizing: border-box;
		border: 4rpx solid #1661FF;
	}
</style>
